<template>
	<div class="confirmDeta">
		<!-- <h3 class="infoPrompt" v-if="data.user_status == 2">对方账户已被冻结，请联系管理人员</h3> -->
		<dl>
			<dt>会员编号：</dt>
			<dd>{{ data.user_login }}</dd>
		</dl>
		<dl>
			<dt>姓名：</dt>
			<dd>{{ data.bank_user }}</dd>
		</dl>
		<dl>
			<dt>手机：</dt>
			<dd>{{ data.mobile }}</dd>
		</dl>
		<dl>
			<dt>钱包类型：</dt>
			<dd>{{ data.transform_wallet | walletType }}</dd>
		</dl>
		<dl>
			<dt>微信：</dt>
			<dd>{{ data.wechat }}</dd>
		</dl>
		<dl>
			<dt>支付宝：</dt>
			<dd>{{ data.alipay }}</dd>
		</dl>
		<dl>
			<dt>银行类型：</dt>
			<dd>{{ data.bank_name }}</dd>
		</dl>
		<dl>
			<dt>银行卡号：</dt>
			<dd>{{ data.bank }}</dd>
		</dl>
		<dl>
			<dt>支付金额：</dt>
			<dd>{{ data.total }}</dd>
		</dl>
		<dl class="certificate">
			<dt>上传支付凭证</dt>
			<div class="file" v-if="data.is_upload !== 0">上传图片<input type="file" @change='updateFile($event)' accept="image/gif, image/jpeg, image/jpg, image/png"></div>
			<dd><img v-if="data.certimg" :src="data.certimg"></dd>
		</dl>

		<div class="posBtn" v-if="data.is_tocomplated == 1" @click='releaseCodeVis'><input type="button" value="确认放行"></div>
		<div class="posBtn" @click="submit" v-if="data.is_upload !== 0"><input type="button" value="确认付款"></div>


		<!-- <div class="posBtn" @click='releaseCodeVis'><input type="button" value="确认放行"></div> -->
		<!-- <div class="posBtn" @click="submit" v-if="data.is_upload !== 0"><input type="button" value="确认付款"></div> -->


		<!-- 放行 - 提示框 -->
		<confirm :inputShow='true' v-model="confirmShow" @yes='releaseEv' inputType='text' title='我们已为您发送验证码，请填写'></confirm>

		<loading :show="show" :text="schedule"></loading>
	</div>
</template>

<script>
import { getUsreOrders, updata, release, sendCodeInfo, visCode } from '../../../../../config/getData'
import axios from 'axios'
import { URL } from '../../../../../config/url'
import Loading from 'vux/src/components/loading/'
import { isUrl } from '../../../../../assets/js/common'
import Confirm from '../../../../component/confirm/confirm'
import { mapState } from 'vuex';

export default {
	data(){
		return {
			data:{
				certimg:'',
			},
			show: false,
			schedule:'0',
			file: null,
			confirmShow: false
		}
	},
	computed:{
		...mapState([
			'userInfo'
		]),
		status(){
			return this.$route.params.status
		}
	},
	created(){
		var id = this.$route.params.id;
		getUsreOrders(id).then( res => {
			this.data = res.data
		})
	},
	methods:{
		//放行，参数，订单id
		releaseCodeVis(){
			sendCodeInfo(this.userInfo.mobile, 1).then( res => {	//发送验证码
				this.confirmShow = true
				var text = res.data.status == 1 ? '验证码已发送到 ' + this.userInfo.mobile : res.msg

				this.$vux.toast.show({
					text,
					time: 4000
				});
			})
		},
		async releaseEv(val){
			var isVisCode = true
			//验证验证码
			await visCode(this.userInfo.mobile, val, 1).then( res => {
				isVisCode = false
			})

			if(isVisCode) return

			let id = this.$route.params.id
			release(id).then( res =>{
				this.$vux.toast.show({
					text: res.msg,
					type:'success',
				})
				this.data.is_tocomplated = false
			})
		},
		submit(){

			if(this.file == null) {
				this.$vux.toast.show({
					text: '请先上传凭证',
					type:'success',
				})
				return ;
			}

			//显示进度
			this.show = true
			let param = new FormData()  // 创建form对象
			param.append('uploadCertImg', this.file)  // 通过append向form对象添加数据
			param.append('id',this.$route.params.id)

			//上传过程中不断执行
			var callback1 = (e) => {
				this.schedule = parseInt( e.loaded / e.total * 100 ).toString() + '%'
			}

			axios({
				url: URL + 'user/trade/toComplateMyTradeInSubmit',
				method: 'post',
				onUploadProgress(e){
					if(e.lengthComputable) callback1(e)
				},
				data: param,
				config:{
					headers: {'Content-Type': 'multipart/form-data'}
				}
			}).then(res =>{
				res = res.data;

				this.show = false
				this.$vux.toast.show({
					text: res.msg,
					type:'success',
				})

				//隐藏上传图片和提交按钮
				this.data.is_upload = 0
			}).catch(error =>{
				console.log(error)
			})

		},
		updateFile(e){
			let files = e.target.files,
				file = files[0]

			if(files.length == 0) return false;

			this.file = file;

			//缩略图
			var imgUrlObj = window.URL || window.webkitURL;
			this.data.certimg = imgUrlObj.createObjectURL(file);


			//上传完成后执行
			var callback2 = (res) => {
				// isUrl
				console.log(res)
				this.show = false
				this.$vux.toast.show({
					text: res.msg,
					type:'success',
				})
			}

		}
	},
	components:{
		Loading,
		Confirm
	}
}
</script>



<style lang="scss" scoped>
@import '../../../../../assets/css/all';
.infoPrompt{font-weight: normal;text-align: center;margin: 30px 0 20px;color:$red;}

.file{width:100px;height: 34px;background-color: #409eff;color:white;text-align: center;line-height: 34px;border-radius: 2px;position: relative;
	input{position: absolute;left:0;top:0;width:100%;height: 100%;opacity: 0;}
}

.confirmDeta{@include screen;background-color: white;
	dl{display: flex;line-height: 45px;
		dt{width:100px;margin-left: 15px;}
	}
	dl.certificate{display: block;overflow: hidden;padding-bottom:100px;
		dt{float:left;}
		.file{float:left;margin-top:6px;}
		dd{
			img{width:90%;margin:0 auto 40px;display: block;}
		}
	}
	.posBtn{position: fixed;left:0;bottom:0;z-index: 3;background-color: white;color:white;text-align: center;width:100%;border-top:1px solid #e6e6e6;padding:15px 0;
		input{width:90%;border-radius: 4px;height: 50px;font-size: 16px;color: white;background-color: #409eff;}
	}
}

</style>

